<template>
  <div class="xpxs">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="filter" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search">搜索</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset">重置</my-button>
      <div class="iconfont bottom" @click="click">&#xe67b;</div>
      <!-- 隐藏的一栏 -->
      <div class="querys" v-show="isShow">
        <my-form :list="filters" @changeFormData="changeConditionss"></my-form>
        <div class="iconfont top" @click="click">&#xe83d;</div>
      </div>
    </div>

    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="report">
          <my-button bgc="#387CF7">
            <a
              href="http://demo1.auth.yingwangke.com/index/report?userkey=d461ab094"
              target="_Blank"
              >查看报表</a
            ></my-button
          >
        </div>
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refreshdata">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column
            v-if="tableColumn.comment_from.show"
            prop="comment_from"
            label="平台"
            min-width="100"
          >
            <template slot-scope="scope">{{
              platfromChange(scope.row.comment_from)
            }}</template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.keyword.show"
            prop="keyword"
            label="关键词"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.title_new.show"
            prop="title_new"
            label="来源"
            min-width="350"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <div class="from" @click="handleClickFrom(scope.row)">
                  {{ scope.row.title_new }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.comment.show"
            prop="comment"
            label="内容"
            min-width="300"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.comment_author.show"
            prop="comment_author"
            label="名称"
            width="150"
          >
          </el-table-column>
          <el-table-column
            v-if="tableColumn.account.show"
            prop="account"
            label="账号"
            min-width="150"
          >
          <template slot-scope="scope">
              <div class="slot-row">
                <span v-html="scope.row.account"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.qrcode_new.show"
            prop="qrcode_new"
            label="二维码"
            width="130"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <div v-if="scope.row.type == 0" class="slot-item">
                  <div
                    v-if="scope.row.comment_from == 'douyin'"
                    @click="barcode(scope.row)"
                  >
                    私信 扫码加好友
                  </div>
                  <div
                    v-if="scope.row.comment_from == 'haokan'"
                    @click="barcode(scope.row)"
                  >
                    查看视频
                  </div>
                  <div
                    v-if="scope.row.comment_from == 'kuaishou'"
                    @click="barcode(scope.row)"
                  >
                    私信 扫码加好友
                  </div>
                  <div
                    v-if="scope.row.comment_from == 'xiaohongshu'"
                    @click="barcode(scope.row)"
                  >
                    私信 扫码加好友
                  </div>
                </div>
                <div v-if="scope.row.type == 1" class="slot-item">
                  <div
                    v-if="scope.row.comment_from == 'douyin'"
                    @click="barcode(scope.row)"
                  >
                    私信 扫码加好友
                  </div>
                  <div
                    v-if="scope.row.comment_from == 'kuaishou'"
                    @click="barcode(scope.row)"
                  >
                    私信 扫码加好友
                  </div>
                </div>
                <div v-if="scope.row.type == 2" class="slot-item">
                  <div v-if="scope.row.comment_from == 'douyin'">
                    <span @click="reply(scope.row)">回复</span>
                    <span @click="barcode(scope.row)">扫码查看</span>
                  </div>
                </div>
                <div v-if="scope.row.type == 3" class="slot-item">
                  <div
                    v-if="scope.row.comment_from == 'douyin'"
                    @click="barcode(scope.row)"
                  >
                    扫码查看
                  </div>
                  <div
                    v-if="scope.row.comment_from == 'kuaishou'"
                    @click="barcode(scope.row)"
                  >
                    扫码查看
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            v-if="tableColumn.status.show"
            prop="status"
            label="状态"
            width="130"
          >
            <template slot-scope="scope">
              <my-switch
                :value.sync="scope.row.status"
                @changeSwitchValue="changeSwitchValue(scope.row)"
              ></my-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.createtime.show"
            prop="createtime"
            label="添加时间"
            width="150"
          ></el-table-column>
          <el-table-column label="操作" prop="operat_new" width="120">
            <template slot-scope="scope">
              <my-button
                v-if="scope.row.operat_new == '申诉'"
                bgc="#FFEEEE"
                border="#FADBDB"
                fontColor="#F78385"
                @click="appeal(scope.row)"
                >{{ scope.row.operat_new }}</my-button
              >
              <my-button
                v-if="scope.row.operat_new == '申诉中'"
                bgc="#f7d264"
                @click="appeal(scope.row)"
                >{{ scope.row.operat_new }}</my-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15,25,30]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog
      :visible.sync="showSuffix"
      :show-close="false"
      top="30vh"
      width="16%"
      class="qrcode-dialog"
    >
      <div class="body">
        <div class="iconfont icon" @click="showSuffix = false">&#xe608;</div>
        <div class="qrcode-bg">
          <img :src="qrCode" alt="" class="qrCode" />
        </div>
      </div>
    </el-dialog>
    <!-- 申诉弹窗 -->
    <el-dialog
      :visible.sync="showConfirm"
      :show-close="false"
      top="25vh"
      width="25%"
      class="submit-dialog"
    >
      <div class="header">
        <div class="title">申诉</div>
        <div class="iconfont icon" @click="showConfirm = false">&#xe608;</div>
      </div>
      <div class="body">
        <input v-model="value" type="text" placeholder="请输入申诉理由,必填" />
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="appealYes">确认</my-button>
        <my-button
          bgc="#fff" border="#DCDCDF" fontColor="#88898E"
          @click="showConfirm = false"
          >取消</my-button
        >
      </div>
    </el-dialog>
    <!-- 回复弹窗 -->
    <el-dialog
      :visible.sync="scancodereply"
      :show-close="false"
      top="25vh"
      width="20%"
      class="submit-dialog"
    >
      <div class="header">
        <div class="title">信息</div>
        <div class="iconfont icon" @click="scancodereply = false">&#xe608;</div>
      </div>
      <div class="body">
        <input type="text" v-model="value1" placeholder="请输入回复内容" />
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="codereply">确认</my-button>
        <my-button
          bgc="#fff" border="#DCDCDF" fontColor="#88898E"
          @click="scancodereply = false"
          >取消</my-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import mySwitch from "@/components/mySwitch.vue";
import myInput from "@/components/myInput.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import option from "@/data/option.js";
export default {
  components: {
    myButton,
    myForm,
    mySwitch,
    myInput,
    myDropdownList,
  },
  data() {
    return {
      replayvalue: "",
      value: "",
      value1: "",
      scancodereply: false,
      showConfirm: false,
      showSuffix: false,
      appealRow: {},
      replyRow: {},
      filter: {
        type: {
          type: "select",
          label: "类型",
          value: "",
          placeholder: "",
          op: "=",
          list: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "关键词",
              value: "0",
            },
            {
              label: "行业达人",
              value: "1",
            },
            {
              label: "我的视频",
              value: "2",
            },
            {
              label: "拓客码",
              value: "3",
            },
          ],
        },
        keyword: {
          type: "input",
          label: "关键词",
          value: "",
          op: "%*%",
          placeholder: "请输入关键词",
        },
        video_title: {
          type: "input",
          label: "来源",
          value: "",
          op: "%*%",
          placeholder: "请输入来源",
          list: option.vedioTypeList,
        },
      }, // 表格列表搜索条件
      filters: {
        comment: {
          type: "input",
          label: "内容",
          value: "",
          op: "%*%",
          placeholder: "请输入内容",
        },
        comment_from: {
          type: "select",
          label: "客户端",
          value: "",
          placeholder: "",
          op: "=",
          list: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "抖音",
              value: "douyin",
            },
            {
              label: "快手",
              value: "kuaishou",
            },
            {
              label: "小红书",
              value: "xiaohongshu",
            },
            {
              label: "好看",
              value: "haokan",
            },
          ],
        },

        status: {
          type: "select",
          label: "状态",
          value: "",
          op: "=",
          placeholder: "请输入来源",
          list: [
            {
              label: "-全部-",
              value: "",
            },
            {
              label: "未处理",
              value: 0,
            },
            {
              label: "已处理",
              value: 1,
            },
          ],
        },
      }, // 表格列表搜索条件
      dataSource: [],
      tableColumn: {
        comment_from: {
          show: true,
          text: "平台",
        },
        keyword: {
          show: true,
          text: "关键词",
        },
        title_new: {
          show: true,
          text: "来源",
        },
        comment: {
          show: true,
          text: "内容",
        },
        comment_author: {
          show: true,
          text: "名称",
        },
        account: {
          show: true,
          text: "账号",
        },
        qrcode_new: {
          show: true,
          text: "二维码",
        },
        status: {
          show: true,
          text: "状态",
        },
        createtime: {
          show: true,
          text: "添加时间",
        },
      },

      tableHeight: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      selectedRows: [],
      qrCode: "",
      showHaoKan: false,
      showConfirm: false,
      isShow: false,
      timer: null,
    };
  },

  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.keywordValue();
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    click() {
      this.isShow = !this.isShow;
    },
    // 获取列表
    async getData() {
      let filter = {};
      let op = {};
      for (let key in this.filter) {
        if (this.filter[key].value === "") {
          continue;
        }
        filter[key] = this.filter[key].value;
        op[key] = this.filter[key].op;
      }
      for (let key in this.filters) {
        if (this.filters[key].value === "") {
          continue;
        }
        filter[key] = this.filters[key].value;
        op[key] = this.filters[key].op;
      }
      let res = await this.$api.xpxs_getData({
        keyword: this.filter.keyword.value,
        page: this.currentPage,
        limit: this.pageSize,
        filter,
        op,
      });
      console.log(res);
      this.dataSource = res.data;
      this.total = res.count;
    },
    keywordValue() {
      let keyword = this.$route.query.keyword;
      if (keyword) {
        this.filter.keyword.value = keyword;
      }
    },
    platfromChange(val) {
      let type = [
        { name: "DY", value: "douyin" },
        { name: "KS", value: "kuaishou" },
        { name: "XHS", value: "xiaohongshu" },
        { name: "HK", value: "haokan" },
      ];
      let result = type.find((v) => v.value == val);
      return result.name;
    },
    search() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 重置筛选条件
    reset() {
      for (let key in this.filter) {
        this.filter[key].value = "";
        this.getData();
      }
    },
    //刷新
    refreshdata() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    //修改状态
    async changeSwitchValue(row) {
      await this.$api.xpxs_changeStatus({
        id: row.id,
        field: "status",
        value: row.status ? 0 : 1,
      });
      this.getData();
    },
    //二维码
    async barcode(row) {
      this.showSuffix = true;
      let qrCode = await this.$api.xpxs_barcode({
        qrkey: row.id,
        qrtype: row.qrtype_new,
        type: "qt0723",
      });
      this.qrCode = "data:image/png;base64," + qrCode;
    },
    //二维码  回复
    reply(row) {
      console.log(row);
      this.scancodereply = true;
      this.replyRow = row;
    },
    async codereply() {
      // console.log(this.value1);
      let res = await this.$api.xpxs_scancodereply({
        vid: this.replyRow.video_id,
        cid: this.replyRow.account_url_new + "==",
        reply: this.value1,
      });
      this.value1 = "";
      this.scancodereply = false;
      if (res.msg == "回复成功") {
        this.$message({
          message: "回复成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "回复失败",
          type: "warning",
        });
      }
    },
    //申诉
    appeal(row) {
      this.showConfirm = true;
      this.appealRow = row;
    },
    handleClickFrom(row) {
      window.open(row.video_src);
    },
    async appealYes() {
      await this.$api.xpxs_appeal({
        id: this.appealRow.id,
        // username:'',
        auditnote: this.value,
      });
      this.showConfirm = false;
      this.getData();
    },
    // 表格
    // 选中行改变时
    selectionChange(selection) {
      this.selectedRows = selection;
    },

    // 页码跳转
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
      console.log(page);
    },
    handleSizeChange(val) {
        this.pageSize=val;
        this.getData();

    },
    // 确认
    confirm() {},
    //筛选选项
    changeConditions(res) {
      this.filter[res.key].value = res.val;
    },
    changeConditionss(res) {
      this.filters[res.key].value = res.val;
    },
    // 控制表格显示哪几列
    changeTableColumn(key) {
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
  },
};
</script>

<style lang="less" scoped>
.xpxs {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 105px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 45px;
  background-color: #fff;
  .button {
    margin-left: 20px;
    width: 70px;
    height: 30px;
  }
  .bottom {
    position: absolute;
    right: 20px;
    color: #e4e4e4;
    font-size: 22px;
    cursor: pointer;
    user-select: none;
  }
  .querys {
    position: absolute;
    top: 45px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    background-color: #fff;
    z-index: 10;
    .top {
      position: absolute;
      right: 20px;
      color: #e4e4e4;
      font-size: 22px;
      cursor: pointer;
      user-select: none;
    }
  }
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 58px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 58px;
    padding: 0 34px;
    box-sizing: border-box;
    .report {
      display: flex;
      align-items: center;
      /deep/ .button {
        width: 114px;
        height: 37px;
        margin-right: 15px;
        a {
          background-color: transparent;
          font-size: 16px;
          font-weight: bold;
          text-decoration: none;
          color: #fff;
        }
      }
    }
    .list-refresh {
      display: flex;
      align-items: center;
      width: 90px;
      padding-top: 10px;
      .icon {
        font-size: 22px;
        color: rgba(212, 212, 212);
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    /deep/ .header-row-class-name {
      height: 63px;
      th {
        background-color: #f5f5f5;
        .cell {
          text-align: center;
          font-weight: bold;
          color: #333;
        }
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      td {
        padding: 0;
        .cell {
          display: flex;
          justify-content: center;
          text-align: center;
          .slot-row {
            display: flex;
            align-items: center;
            justify-content: center;
            .slot-item {
              div {
                color: blue;
                cursor: pointer;
              }
            }
            .from {
              cursor: pointer;
            }
            .barcode {
              color: blue;
              cursor: pointer;
            }
            .icon-block {
              display: flex;
              align-items: center;
              height: 18px;
              padding: 0 8px;
              border-right: 2px solid #c7c7c7;
              .icon {
                color: #333;
                font-size: 20px !important;
              }
              .number {
                color: #333;
                font-size: 16px;
              }
            }
            :last-child {
              border-right: 0;
            }
          }
          .button {
            width: 78px;
            height: 28px;
          }
        }
      }
    }
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgb(230, 228, 228);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #fff;
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387CF7 !important;
  }
}

// 弹窗样式
// 二维码 弹窗样式
.qrcode-dialog {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0px 0px;
    .body {
      position: relative;

      width: 310px;
      height: 310px;
      padding: 40px;
      box-sizing: border-box;
      background-color: #fff;
      .icon {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgb(202, 201, 201);
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
      }
      .qrcode-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: url("../../../assets/img/qrCode_bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        box-sizing: border-box;
        .qrCode {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
// submit-dialog"
.submit-dialog {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0px 0px;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      padding: 15px 28px;
      box-sizing: border-box;
      color: #333;
      background-color: #f0f4ff;
      border-bottom: 1px solid #e7e7e7;
      .icon {
        color: #999;
        cursor: pointer;
        user-select: none;
      }
    }
    .body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 30px 40px;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 40px;
        text-indent: 5px;
        font-size: 15px;
        border: 1px solid #e7e7e7;
        outline: none;
      }
    }
    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 0px 20px 0;
      box-sizing: border-box;
      .button {
        width: 120px;
        height: 36px;
        margin-left: 15px;
      }
    }
  }
}
.confirm {
  .body {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #333;
    font-size: 18px;
  }
}
</style>